import React, { Component } from "react";
import "../../assets/css/check.scss";
import { message } from "antd";
import {
  getCarOwnerIdCard,
  getCarOwnerId,
  changeOwnerToOwner,
} from "../../apis/usersApi";

export default class OwnersList extends Component {
  state = {
    choice: false,
    role: 1,
    positive: false,
    verso: false,
    applys: [],
    checkStatus: "Processing",
    user: [],
  };
  componentDidMount() {
    this.getOwnerApply();
  }
  //根据状态获取所有申请订单
  getOwnerApply = async () => {
    let { checkStatus, applys } = this.state;
    const data = await getCarOwnerIdCard({ checkStatus });
    applys = data;
    this.setState({ applys });
  };
  //显示模态框
  appear = async (_id) => {
    let { choice, user } = this.state;
    choice = true;
    this.setState({ choice });
    try {
      const data = await getCarOwnerId({ _id });
      user = data;
      this.setState({ user });
    } catch (error) {
      console.log(error);
    }
  };
  //点击关闭模态框
  close = () => {
    let { choice } = this.state;
    choice = false;
    this.setState({ choice });
  };
  //申请审核
  agree = async (_id, role, checkStatus) => {
    await changeOwnerToOwner({ _id, checkStatus, role });
    message.success("操作成功");
    this.close();
    this.getOwnerApply();
  };
  //身份证正面放大缩小
  changImgP = () => {
    let { positive } = this.state;
    positive = !positive;
    this.setState({ positive });
  };
  //身份证反面放大缩小
  changImgV = () => {
    let { verso } = this.state;
    verso = !verso;
    this.setState({ verso });
  };
  render() {
    let { choice, positive, verso, applys, user } = this.state;
    return (
      <div style={{ whdth: "100%", height: "100%" }}>
        <div className="box1">
          <div className="bigBox1">
            <div className="idBox1">身份证号</div>
            <div className="nameBox1">真实姓名</div>
            <div className="timeBox1">申请时间</div>
            <div className="butBox1">操作</div>
          </div>
          {applys.map((item, index) => {
            return (
              <div className="itmeBox1" key={item._id}>
                <div className="id1">{item.idCard}</div>
                <div className="name1">{item.name}</div>
                <div className="time1">{item.time}</div>
                <div className="buts" onClick={() => this.appear(item._id)}>
                  <a>详情</a>
                </div>
              </div>
            );
          })}

          <div className={choice ? "showBox1" : "closeBox1"}>
            <div className="minBox1">
              <div className="show1">
                <a onClick={this.close}>X</a>
              </div>
              <div className="flexBox1">
                <div className="childBox1">
                  <span className="left1">Id:</span>
                  <span className="right1">{user._id}</span>
                </div>
                <div className="childBox1">
                  <span className="left1">真实姓名:</span>
                  <span className="right1">{user.name}</span>
                </div>
                <div className="childBox1">
                  <span className="left1">身份证号:</span>
                  <span className="right1">{user.idCard}</span>
                </div>
                <div className="childBox1">
                  <span className="left1">电话号码:</span>
                  <span className="right1">{user.phone}</span>
                </div>
                <div className="childBox1">
                  <span className="left1">居住地址:</span>
                  <span className="right1">{user.address}</span>
                </div>
                <div className="childBox1">
                  <span className="left1">身份证正面:</span>
                  <span className="right1">
                    <img
                      src={require("../../assets/images/fm_02.png").default}
                      alt=""
                      onClick={this.changImgP}
                      className={positive ? "bigImg" : ""}
                    />
                  </span>
                </div>
                <div className="childBox1">
                  <span className="left1">身份证反面:</span>
                  <span className="right1">
                    <img
                      src={require("../../assets/images/fm_01.png").default}
                      alt=""
                      onClick={this.changImgV}
                      className={verso ? "bigImg" : ""}
                    />
                  </span>
                </div>
                <div className="childBox1">
                  <a
                    onClick={() => this.agree(user._id, 1, "yes")}
                    className="agree1"
                  >
                    审核通过
                  </a>
                  <a
                    onClick={() => this.agree(user._id, 0, "noway")}
                    className="refuse1"
                  >
                    无情拒绝
                  </a>
                </div>
                <div className="inquiryBox"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
